<template>
    <view class="box">
        <view class="flex_wrap column_between">
            <u-gap height="14rpx" bgColor="#F5F5F5" />
            <view class="meetingHead column_between">
                <view class="meetingTitle flex_wrap row_middle row_between">
                    <view class="flex_wrap">
                        <u-icon
                            name="/static/img/conference/detailicon.png"
                            space="14rpx"
                            width="48rpx"
                            height="48rpx"
                            labelSize="40rpx"
                            labelColor="#333"
                            bold
                        /><view class="boxwrap">{{ meetDetail.theme }}</view>
                    </view>
                    <!-- <view
                        class="shareWrap"
                        @click="showShare = true"
                        v-if="meetDetail.meetState === '1'"
                        ><u-icon
                            name="/static/img/conference/share.png"
                            label="分享"
                            space="14rpx"
                            width="32rpx"
                            height="32rpx"
                            labelSize="28rpx"
                            labelColor="#fff"
                            bold
                    /></view> -->
                    <view
                        class="flex_wrap shareWrap"
                        @click="toInitiateMeeting"
                        v-if="
                            String(meetDetail.submitManId) ===
                                String(userInfo.id) &&
                            meetDetail.meetState === '1'
                        "
                        ><u-icon
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/01/30/637e235e6c40435eae386f2d7ab5de8e.png"
                            size="32rpx"
                        /><view class="boxwrap">邀请函</view></view
                    >
                </view>
                <view class="meetingTime flex_wrap row_between row_middle">
                    <view class="flex_wrap column_between">
                        <u--text
                            bold
                            :text="$u.timeFormat(meetDetail.startTime, 'hh:MM')"
                            size="48rpx"
                            color="#333"
                            lineHeight="80rpx"
                        />
                        <u--text
                            color="#333"
                            size="32rpx"
                            :text="
                                $u.timeFormat(
                                    meetDetail.startTime,
                                    'yyyy/mm/dd'
                                )
                            "
                        />
                    </view>
                    <u-image
                        src="/static/img/conference/iconline.png"
                        width="168rpx"
                        height="20rpx"
                        mode="widthFix"
                    />
                    <view class="flex_wrap column_between">
                        <u--text
                            bold
                            :text="$u.timeFormat(meetDetail.endTime, 'hh:MM')"
                            size="48rpx"
                            color="#333"
                            align="right"
                            lineHeight="80rpx"
                        />
                        <u--text
                            color="#333"
                            size="32rpx"
                            :text="
                                $u.timeFormat(meetDetail.endTime, 'yyyy/mm/dd')
                            "
                        />
                    </view>
                </view>
            </view>
            <u-gap height="14rpx" bgColor="#F5F5F5" />
            <view class="meetingMessage flex_wrap flex_column">
                <u-gap height="20rpx"></u-gap>
                <!-- <u-row>
                    <u-col span="3"
                        ><u--text
                            text="会议编号"
                            color="#666"
                            size="28rpx"
                            selectable
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="meetDetail.meetNum"
                            color="#333"
                            size="28rpx"
                    /></u-col>
                </u-row>
                <u-gap height="20rpx"></u-gap>
               <u-row>
                    <u-col span="3"
                        ><u--text text="主办/负责人" color="#666" size="28rpx"
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="`${meetDetail.organizer} (${meetDetail.organizerPerson})  `"
                            color="#333"
                            size="28rpx"
                    /></u-col>
                </u-row>
                <u-gap height="20rpx" /> -->
                <u-row>
                    <u-col span="3"
                        ><u--text text="讲师" color="#666" size="28rpx"
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="`${meetDetail.lecturer}`"
                            color="#333"
                            size="28rpx"
                    /></u-col>
                </u-row>
                <u-gap height="20rpx" />
                <!-- <u-row>
                    <u-col span="3"
                        ><u--text text="业务归属" color="#666" size="28rpx"
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="`${meetDetail.businessAffiliation}`"
                            color="#333"
                            size="28rpx"
                    /></u-col>
                </u-row>
                <u-gap height="20rpx" /> -->
                <u-row justify="space-between" align="top" @click="openMap">
                    <u-col span="3"
                        ><u--text text="会议地址" color="#666" size="28rpx"
                    /></u-col>
                    <u-col span="7"
                        ><u--text
                            :text="`${meetDetail.addressName || ''}${
                                meetDetail.address
                            }`"
                            color="#333"
                            size="28rpx"
                    /></u-col>
                    <u-col span="2">
                        <u--text
                            prefixIcon="/static/img/conference/mapIcon.png"
                            iconStyle="width:32rpx;height:32rpx"
                            text="导航"
                            space="4rpx"
                            size="28rpx"
                            color="#999"
                            align="right"
                        />
                    </u-col>
                </u-row>
                <u-gap height="20rpx" />
                <u-row
                    v-if="
                        String(meetDetail.submitManId) === String(userInfo.id)
                    "
                >
                    <u-col span="3"
                        ><u--text text="签到限制" color="#666" size="28rpx"
                    /></u-col>
                    <u-col span="8"
                        ><u-radio-group
                            v-model="meetDetail.verifyType"
                            placement="row"
                            @change="groupChange"
                        >
                            <u-radio
                                name="0"
                                label="不限制"
                                :customStyle="{ marginRight: '8px' }"
                            ></u-radio>
                            <u-radio
                                name="1"
                                label="定位限制"
                            ></u-radio> </u-radio-group
                    ></u-col>
                </u-row>
                <view v-if="meetDetail.picture">
                    <u-gap height="50rpx" />
                    <u-image
                        height="378rpx"
                        width="694rpx"
                        :src="meetDetail.picture"
                        mode="aspectFill"
                        radius="12rpx"
                    />
                    <u-gap height="36rpx" />
                </view>
                <u-gap height="20rpx" />
            </view>
        </view>
        <u-gap height="14rpx" bgColor="#F5F5F5" />
        <!-- 会议必须是在进行中 && 已经报名 && 不是本人的会议（下级才能扫描二维码签到） -->
        <!--  -->
        <view
            class="code flex_column flex_wrap"
            v-if="
                (['0', '1'].includes(meetDetail.meetState) && haveSignedUp) ||
                (String(meetDetail.submitManId) === String(userInfo.id) &&
                    ['0', '1'].includes(meetDetail.meetState))
            "
        >
            <u--text
                text="客户签到请扫码"
                size="28rpx"
                color="#333"
                bold
                align="center"
            />

            <u-gap height="30rpx" />
            <view class="codeBox">
                <u--image
                    :src="baseSrc"
                    width="200px"
                    height="200px"
                ></u--image>
                <u--text
                    text="长按图片可分享保存"
                    size="26rpx"
                    color="#000"
                    bold
                    align="center"
                />
            </view>
            <u-gap height="14rpx" bgColor="#F5F5F5" />
        </view>

        <!-- 这两个按钮的显示条件：会议未开始 && 会议不是本人发起的-->
        <!-- <block
            v-if="
                meetDetail.meetState === '1' &&
                String(meetDetail.submitManId) !== String(userInfo.id)
            "
        >
            <u-button
                text="报名"
                color="#588BF3"
                :hairline="false"
                shape="circle"
                :customStyle="buttonCustomStyle"
                @click="signIn"
                v-if="!haveSignedUp"
            />
            <u-button
                text="取消报名"
                :loading="signLoading"
                type="default"
                plain
                :hairline="false"
                @click="signUpHandler"
                shape="circle"
                :customStyle="{
                    ...buttonCustomStyle,
                    border: '1px solid #666',
                }"
                v-else
            />
        </block> -->

        <view class="meetingListWrap" v-if="meetDetail.showPermission == 1">
            <u-cell-group :border="false">
                <!-- <u-cell
                    title="业务员报名列表"
                    icon="/static/img/conference/one.png"
                    v-if="
                        String(meetDetail.submitManId) === String(userInfo.id)
                    "
                    isLink
                    iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                    titleStyle="font-size: 32rpx;color: #333333;"
                    url="/pages/componentsB/tag/tag"
                    :url="`/pages_conferenceDetail/signList/index?type=1&meetId=${meetId}`"
                ></u-cell> -->
                <u-cell
                    title="客户报名列表"
                    isLink
                    titleStyle="font-size: 32rpx;color: #333333;"
                    icon="/static/img/conference/two.png"
                    iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                    url="/pages/componentsB/tag/tag"
                    :url="`/pages_conferenceDetail/signList/index?type=2&meetId=${meetId}`"
                ></u-cell>
                <u-cell
                    title="客户签到列表"
                    isLink
                    titleStyle="font-size: 32rpx;color: #333333;"
                    iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                    icon="/static/img/conference/three.png"
                    :url="`/pages_conferenceDetail/signList/index?type=3&meetId=${meetId}`"
                ></u-cell>
                <!-- <u-cell
                    title="现场抽奖"
                    :border="false"
                    isLink
                    titleStyle="font-size: 32rpx;color: #333333;"
                    iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                    icon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/17/6fd14c94cc184a4688fff1041f791c19.png"
                    v-if="
                        String(meetDetail.submitManId) === String(userInfo.id)
                    "
                    @click="to_popup()"
                ></u-cell> -->
                <!-- <u-cell
				    title="网页抽奖链接"
				    :border="false"
				    isLink
				    titleStyle="font-size: 32rpx;color: #333333;"
				    iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
				    icon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/24/75f7ee077662488d80a4b2b790eff933.png"
					v-if="
					    String(meetDetail.submitManId) === String(userInfo.id)
					"
				    @click="linkShow = true"
				></u-cell> -->
            </u-cell-group>
        </view>
        <!-- <u-button
            text="签到表"
            color="#588BF3"
            :hairline="false"
            shape="circle"
            :loading="signLoading"
            :customStyle="buttonCustomStyle"
            @click="toSignList"
            v-if="
                meetDetail.meetState === '2' ||
                (meetDetail.meetState === '0' && haveSignedUp) ||
                (String(meetDetail.submitManId) === String(userInfo.id) &&
                    meetDetail.meetState === '0')
            "
        /> -->
        <!-- 撤销 -->
        <block
            v-if="
                meetDetail.meetState === '1' &&
                meetDetail.checkState !== '3' &&
                String(meetDetail.submitManId) === String(userInfo.id)
            "
        >
            <u-button
                text="撤销"
                color="#588BF3"
                :hairline="false"
                shape="circle"
                :customStyle="buttonCustomStyle"
                @click="revokeHandler"
            />
        </block>
        <!-- 转发弹框 -->
        <u-popup
            :show="showShare"
            mode="bottom"
            :overlayOpacity="overlayOpacity"
            @close="showShare = false"
            @open="
                overlayOpacity = '0.5';
                showShare = true;
            "
            :closeable="true"
            @touchmove.stop.prevent="() => {}"
        >
            <view
                style="
                    height: 324rpx;
                    text-align: center;
                    font-size: 28rpx;
                    margin-top: 12rpx;
                "
                @touchmove.stop.prevent="() => {}"
            >
                <text>分享给</text>
                <view
                    style="
                        margin-top: 40rpx;
                        display: flex;
                        justify-content: center;
                    "
                >
                    <button open-type="share" style="background-color: #fff">
                        <image
                            src="/static/img/conference/weixin.png"
                            mode=""
                            style="width: 80rpx; height: 80rpx"
                        ></image>
                        <view style="margin-top: 10rpx; font-size: 28rpx"
                            >微信好友</view
                        >
                    </button>
                </view>
            </view>
        </u-popup>
        <u-modal
            :show="luckyDrawShow"
            ref="editModal"
            title="抽奖名称"
            showCancelButton
            @confirm="confirmEdit"
            @cancel="cancelEdit"
            confirmColor="#1682FF"
        >
            <view slot="default" style="width: 100%">
                <u--input
                    type="text"
                    placeholder="请输入抽奖名称"
                    clearable
                    v-model="luckyDrawName"
                    :customStyle="{
                        background: '#F7F7F7',
                        borderRadius: '16rpx 16rpx 16rpx 16rpx',
                        border: 'none',
                        height: '80rpx',
                        marginTop: '20rpx',
                    }"
                    :placeholderStyle="{
                        fontSize: '28rpx',
                        color: '#F7F7F7',
                    }"
                ></u--input>
            </view>
        </u-modal>
        <u-popup
            :show="linkShow"
            mode="center"
            :round="10"
            @close="linkShow = false"
            closeable
        >
            <view class="webLink">
                <view class="">
                    <u--text
                        text="点击复制，在浏览器打开链接"
                        size="32rpx"
                        color="#666"
                        align="center"
                    />
                </view>
                <view class="">
                    <u--text
                        :text="links + meetId"
                        size="32rpx"
                        color="#666"
                        align="center"
                        margin="28rpx 0 40rpx"
                    />
                </view>
                <u-button
                    @click="copeLink"
                    :customStyle="btnStyle"
                    :plain="true"
                    color="#1682FF"
                    shape="circle"
                    text="复制"
                ></u-button>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { salesmanInfo } from "@/api/userSalesman.js";

import {
    getSignUpIdByMeetId,
    signUp,
    cancelSignUp,
    getMeetDetailByMeetId,
    revokeMeet,
    updateMeetVerifyType,
    launchALuckyDraw,
} from "@/api/salesmanMeeting.js";
import { getMiniCodeByAppId } from "@/api/orderSalesman.js";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            links: "https://test-activity-card.oneredhealth.com/activation?cardnum=",
            btnStyle: {
                width: "300rpx",
            },
            overlayOpacity: "0.5",
            showShare: false,
            IconStyle: {
                width: "36rpx",
                height: "36rpx",
                marginRight: "14rpx",
            },
            signLoading: false,
            codeSize: uni.upx2px(270),
            buttonCustomStyle: {
                width: "90vw",
                marginTop: "100rpx",
                outline: "none",
                border: "none",
            },
            getSignUpIdLoading: false,
            meetId: "", // 会议id
            haveSignedUp: false, // 是否报名
            meetDetail: {},
            signUpId: null, //签到Id
            baseSrc: "",
            luckyDrawShow: false,
            luckyDrawName: "", //抽奖名称
            linkShow: false,
        };
    },

    computed: {
        ...mapGetters(["userInfo"]),
    },
    onLoad(options) {
        this.meetId = options.meetId;

        this.haveSignedUp = options.haveSignedUp === "true" ? true : false;
        this.getMeetDetail(this.meetId); //获取会议详情
        // 如果报名了就直接根据会议id（meetId）去获取签到Id（signUpId）
        // if (this.haveSignedUp) {
        this.getSignUpId(this.meetId);
        // }
    },
    methods: {
        copeLink() {
            let data = this.links + this.meetId;
            uni.setClipboardData({
                data: data,
                success: (res) => {
                    uni.showToast({
                        title: "已复制",
                        duration: 1000,
                    });
                },
            });
            this.linkShow = false;
        },
        to_popup() {
            this.luckyDrawShow = true;
        },
        cancelEdit() {
            this.luckyDrawName = "";
            this.luckyDrawShow = false;
        },

        async confirmEdit() {
            if (!this.luckyDrawName)
                return uni.showToast({
                    title: "请输入抽奖名称",
                    icon: "none",
                });
            const params = {
                meetId: this.meetId,
                name: this.luckyDrawName,
            };
            console.log(params, "aa");
            let res = await launchALuckyDraw(params);
            if (res.code === 200) {
                uni.$u.toast("创建抽奖活动成功");
                uni.$u.route({
                    url: "/pages_conferenceDetail/luckyDraw/index",
                    params: {
                        name: this.luckyDrawName,
                        meetId: this.meetId,
                        prizeDrawId: res.data.id,
                    },
                });
                this.cancelEdit();
            }
        },
        toInitiateMeeting() {
            uni.$u.route({
                url:
                    "pages_invitationCard/cardList/index?meetId=" + this.meetId,
            });
        },
        revokeHandler() {
            const that = this;
            uni.showModal({
                content: "确认撤销该会议",
                showCancel: true,
                success({ confirm, cancel }) {
                    if (confirm) {
                        revokeMeet(that.meetId).then((res) => {
                            uni.$u.toast("撤销成功!");
                            that.getMeetDetail(that.meetId);
                        });
                    }
                },
            });
        },
        async groupChange(n) {
            const { code, data } = await updateMeetVerifyType({
                meetId: this.meetId,
                verifyType: n,
            });
            if (code === 200) uni.$u.toast(data);
        },
        //用户信息
        async getInfo() {
            //当月优胜签到最多
            const res = await salesmanInfo();
            if (res.code === 200) {
                this.dimission = res.data.dimission;
            }
        },
        getMeetDetail(meetId) {
            getMeetDetailByMeetId(meetId).then((res) => {
                res.data.verifyType = res.data.verifyType ?? "0";
                this.meetDetail = res.data;
            });
        },
        // 获取报名ID
        async getSignUpId(meetId) {
            const that = this;
            that.signUpId = null;
            that.getSignUpIdLoading = true;
            getSignUpIdByMeetId(meetId)
                .then((res) => {
                    if (res.code === 200 && res.data) {
                        that.signUpId = res.data;
                        const version = __wxConfig.envVersion;
                        const params = {
                            page: "pages_signin/index/index",
                            scene:
                                that.signUpId +
                                "&" +
                                meetId +
                                "&" +
                                this.haveSignedUp,
                            env_version: version,
                            check_path: false,
                            appId: this.$appId,
                        };
                        getMiniCodeByAppId(params).then((res) => {
                            if (res.code === 200 && res.data) {
                                var showImgData = res.data;
                                that.baseSrc =
                                    "data:image/png;base64," + showImgData;
                            }
                        });
                    }
                })
                .finally(() => {
                    that.getSignUpIdLoading = false;
                });
        },
        signIn() {
            this.getInfo().then(() => {
                if (this.dimission !== "0") {
                    uni.showToast({
                        icon: "none",
                        title: "已离职,不可报名",
                    });
                    return;
                } else {
                    const that = this;
                    that.signLoading = true;
                    uni.showModal({
                        title: "",
                        content: "是否报名此会议?",
                        success({ confirm, cancel }) {
                            if (confirm) {
                                signUp(that.meetId)
                                    .then((res) => {
                                        uni.$u.toast("报名成功!", 3000);
                                        uni.$u.sleep(200).then(() => {
                                            that.getSignUpId(that.meetId)
                                                .then(async () => {
                                                    that.haveSignedUp = true;
                                                    hat.signLoading = false;
                                                    uni.$u.toast(
                                                        "已生成签到二维码!"
                                                    );
                                                })
                                                .catch((error) => {
                                                    that.signLoading = false;
                                                });
                                        });
                                    })
                                    .catch((error) => {
                                        that.signLoading = false;
                                    });
                            }
                            if (cancel) {
                                that.signLoading = false;
                            }
                        },
                    });
                }
            });
        },
        signUpHandler() {
            const that = this;
            that.signLoading = true;
            uni.showModal({
                title: "",
                content: "是否取消报名?",
                success({ confirm, cancel }) {
                    if (confirm) {
                        cancelSignUp(that.signUpId)
                            .then((res) => {
                                uni.$u.toast("取消报名成功！", 1000);
                                uni.$u.sleep(200).then(() => {
                                    that.haveSignedUp = false;
                                    that.signLoading = false;
                                });
                            })
                            .catch((error) => {
                                that.signLoading = false;
                            });
                    }
                    if (cancel) {
                        that.signLoading = false;
                    }
                },
            });
        },
        toSignList() {
            const that = this;
            uni.$u.route({
                url: "pages_conferenceDetail/signList/index",
                params: {
                    signUpId: that.signUpId,
                },
            });
        },
        openMap() {
            // wx.navigateToMiniProgram({
            //         appId: 'wx33fd6cdc62520063', // 要跳转的微信小程序appid
            //         path: 'pages/sub-preMeeting/join-meeting/join-meeting?scene=m%3D'+177553566, // 要跳转到的页面路径
            //         success() {},
            //         fail() {}
            // });

            const that = this;
            uni.openLocation({
                longitude: Number(that.meetDetail.coordinatesX), //经度
                latitude: Number(that.meetDetail.coordinatesY), //纬度
                // name: that.meetDetail.address, // 目的地定位名称
                name: that.meetDetail.addressName, // 目的地定位名称
                scale: 15, //缩放比例
                // address: `${this.meetDetail.province}${this.meetDetail.city}${this.meetDetail.county}${this.meetDetail.address}` //导航详细地址
                address: that.meetDetail.address, //导航详细地址
            });
        },
        async onShareAppMessage(res) {
            await (this.showShare = false);
            this.overlayOpacity = "0";
            const shareData = await {
				imageUrl: this.meetDetail.picture, 
                title: this.meetDetail.theme,
                path:
                    "/pages_conferenceDetail/detail/shareIndex?meetId=" +
                    this.meetDetail.id +
                    "&salesmanId=" +
                    this.$store.getters?.userInfo.id +
                    "&haveSignedUp=" +
                    this.haveSignedUp,
            };
            return shareData;
        },
    },
};
</script>
<style>
page {
    background-color: #fff !important;
}
</style>

<style lang="scss" scoped>
.meetingHead {
    width: 100vw;
    height: auto;
    padding: 0 28upx;
    background-color: #fff;
    .meetingTitle {
        width: 100%;
        height: 96rpx;
        border-bottom: 1px solid #f3f3f3;
    }
    .meetingTime {
        padding: 20upx 16upx;
    }
}
.meetingMessage {
    background-color: #fff;
    padding: 10upx 28upx;
}
.code {
    overflow: hidden;
    width: 100vw;
    height: auto;
    margin: 0 auto;
    padding-top: 40upx;
    .codeBox {
        // width: 270upx;
        // height: 270upx;
        margin: 0 auto;
        margin-bottom: 40upx;
    }
}
.box {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
.meetingListWrap {
    padding: 0 30rpx;
}
.shareWrap {
    background: #588bf3;
    border-radius: 4000rpx 4000rpx 4000rpx 4000rpx;
    width: 140rpx;
    padding: 12rpx 10rpx;

    .boxwrap {
        display: block;
        width: 500rpx;
        color: #fff;
        font-size: 28rpx;
    }
}
.boxwrap {
    display: block;
    width: 500rpx;
    overflow: hidden;
    font-size: 40rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}
.webLink {
    width: 600rpx;
    padding: 80rpx 40rpx 0;
}
</style>
